<style lang="scss" scoped>
.seach-all {
    width: 100%;
    .seach {
        position: relative;
        .search_style_icon1 {
            position: absolute;
            right: 2.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            color: #cccccc;
        }
        .search_style_icon {
            position: absolute;
            right: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
        }
    }
}
</style>

<template>
    <view class="seach-all">
        <view class="seach">
            <u-search search-icon="none" class="search" :placeholder="placeholder" :animation="false" height="74" :show-action="false" bg-color="#FFFFFF" placeholder-color="rgba(102, 102, 102, 0.4)" shape="round" v-model="state.searchValue" :clearabled="false" @search="search"></u-search>
            <u-icon v-if="state.searchValue" name="close-circle-fill" class="search_style_icon1" @click="seachclose"></u-icon>
            <u-icon @click="handleHistoreSearch" name="search" color="#666666" class="search_style_icon"></u-icon>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
const props = defineProps({
    placeholder: {
        type: String,
        default: "",
    },
});
const emit = defineEmits<{
    (event: "search", value: string): void;
}>();
const state = reactive<{
    searchValue: string;
}>({
    searchValue: "",
});
const search = () => {
    emit("search", state.searchValue);
};
const seachclose = () => {
    state.searchValue = "";
};
const handleHistoreSearch = () => {
    emit("search", state.searchValue);
};
</script>
